<template>
  <!-- 调研组件 -->
  <!-- 组件类型: 104 -->
  <div class="vy-cmp-survey">
    <div class="vy-cmp-survey-container">
      <div class="vy-cmp-survey-form">
        <a-form>
          <a-form-item v-if="formData.questions.length">
            <template v-for="(survey, index) in formData.questions">
              <template v-if="survey.type == '1'">
                <vy-cmp-survey-single :key="index" :index="index"
                  :title="fmt_view_title(index, survey.type)" :source="survey" 
                  @del_survey="click_del_survey"></vy-cmp-survey-single>
              </template>
              <template v-if="survey.type == '2'">
                <vy-cmp-survey-multi :key="index" :index="index"
                  :title="fmt_view_title(index, survey.type)" :source="survey" 
                  @del_survey="click_del_survey"></vy-cmp-survey-multi>
              </template>
              <template v-if="survey.type == '3'">
                <vy-cmp-survey-tandf :key="index" :index="index"
                  :title="fmt_view_title(index, survey.type)" :source="survey" 
                  @del_survey="click_del_survey"></vy-cmp-survey-tandf>
              </template>
              <template v-if="survey.type == '4'">
                <vy-cmp-survey-qanda :key="index" :index="index"
                  :title="fmt_view_title(index, survey.type)" :source="survey" 
                  @del_survey="click_del_survey"></vy-cmp-survey-qanda>
              </template>
              <template v-if="survey.type == '5'">
                <vy-cmp-survey-score :key="index" :index="index"
                  :title="fmt_view_title(index, survey.type)" :source="survey" 
                  @del_survey="click_del_survey"></vy-cmp-survey-score>
              </template>
            </template>
          </a-form-item>
          <a-form-item>
            <div class="vy-plus-panel">
              <template v-if="plusEnableClick">
                <div class="vy-plus-btn" @click="()=> optionShow = !optionShow">
                  <a-icon type="plus"/>
                </div>
              </template>
              <template v-else>
                <div class="vy-plus-btn" style="cursor: unset;">
                  <a-icon type="plus" style="cursor: unset;"/>
                </div>
              </template>
            </div>
            <div class="vy-plus-wrapper">
              <div class="vy-plus-options" v-show="optionShow">
                <div class="vy-plus-options-panel">
                  <div class="vy-plus-options-item" @click="click_add_survey('1')">
                    <div class="vy-plus-options-item-icon">
                      <svg class="icon" aria-hidden="true" font-size="32" color="#ffffff">
                        <use xlink:href="#iconiconfontradiobox"></use>
                      </svg>
                    </div>
                    <div class="vy-plus-options-item-desc">单选题</div>
                  </div>
                  <div class="vy-plus-options-item" @click="click_add_survey('2')">
                    <div class="vy-plus-options-item-icon">
                      <svg class="icon" aria-hidden="true" font-size="32" color="#ffffff">
                        <use xlink:href="#iconduoxuan"></use>
                      </svg>
                    </div>
                    <div class="vy-plus-options-item-desc">多选题</div>
                  </div>
                  <div class="vy-plus-options-item" @click="click_add_survey('3')">
                    <div class="vy-plus-options-item-icon">
                      <svg class="icon" aria-hidden="true" font-size="32" color="#ffffff">
                        <use xlink:href="#iconpanduanti"></use>
                      </svg>
                    </div>
                    <div class="vy-plus-options-item-desc">判断题</div>
                  </div>
                  <div class="vy-plus-options-item" @click="click_add_survey('4')">
                    <div class="vy-plus-options-item-icon">
                      <svg class="icon" aria-hidden="true" font-size="32" color="#ffffff">
                        <use xlink:href="#iconwenda"></use>
                      </svg>
                    </div>
                    <div class="vy-plus-options-item-desc">问答题</div>
                  </div>
                  <div class="vy-plus-options-item" @click="click_add_survey('5')">
                    <div class="vy-plus-options-item-icon">
                      <svg class="icon" aria-hidden="true" font-size="32" color="#ffffff">
                        <use xlink:href="#icondianping"></use>
                      </svg>
                    </div>
                    <div class="vy-plus-options-item-desc">打分题</div>
                  </div>
                </div>
              </div>
            </div>
          </a-form-item>
          <a-form-item class="vy-form-footer">
            <a-button type="primary" :disabled="!formData.questions.length" @click="click_save_info">保存更改</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
// 调研类型关系
const survey_TYPE = {
  "1": "单选题",
  "2": "多选题",
  "3": "判断题",
  "4": "问答题",
  "5": "打分题"
};
// 调研面板实体对象
const survey_FIELD = {
  id: +new Date(), // 题目Id
  title: "", // 题目
  correctAnswer: null, // 正确答案
  analysis: null, // 解析
  options: [] // 选项集合
};
import SurveySingle from "./survey/single.vue"; // 单选题
import SurveyMulti from "./survey/multi.vue"; // 多选题
import SurveyTAndF from "./survey/tandf.vue"; // 判断题
import SurveyQAndA from "./survey/qanda.vue"; // 问答题
import SurveyScore from "./survey/score.vue"; // 打分题

const CMP_TYPE = 104; // 组件类型
export default {
  name: "vy-cmp-survey",
  data() {
    return {
      plusEnableClick: false, // 添加按钮可以点击
      optionShow: true, // 添加选项是否显示
      projectId: null, // 项目id
      // 表单字段数据
      formData: {
        questions: []
      }
    };
  },
  components: {
    [SurveySingle.name]: SurveySingle,
    [SurveyMulti.name]: SurveyMulti,
    [SurveyTAndF.name]: SurveyTAndF,
    [SurveyQAndA.name]: SurveyQAndA,
    [SurveyScore.name]: SurveyScore
  },
  methods: {
    // 格式化添加的子组件标题
    fmt_view_title(index, type) {
      return `问题${index + 1}【${survey_TYPE[type]}】`;
    },
    // 添加调研-实现方法
    add_survey(type) {
      let _survey = JSON.parse(JSON.stringify(survey_FIELD));
      Object.assign(_survey, {
        type: type // 题目类型
      });
      this.formData.questions.push(_survey);
    },
    // 点击添加调研
    click_add_survey(type) {
      this.add_survey(type);
    },
    // 删除当前调研
    click_del_survey(index) {
      this.formData.questions.splice(index, 1);
    },
    // 获取主题信息
    getModuleId() {
      return this.themeTab && this.themeTab.id;
    },
    // 创建/更新内容组件
    saveInfo() {
      let params = Object.assign({}, this.formData, {
        moduleType: CMP_TYPE,
        projectId: this.projectId,
        moduleId: this.getModuleId() // 主题Id
      });
      this.$axios.post("/subassembly/save", params).then(res => {
        if (res.success) {
          this.$message.success(res.msg);
          setTimeout(() => {
            // 查询已创建的主题模块
            // this.$parent.$parent.queryModuleInfo(CMP_TYPE);
            this.$bus.emit("refreshThemeList"); // 监听主题列表刷新事件
          }, 500);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 保存更改
    click_save_info() {
      this.saveInfo();
    }
  }
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-survey {
  width: 100%;
  height: 100%;
  background: #ffffff;
  input.ant-input {
    border: none;
    border-bottom: 1px solid #d9d9d9;
    border-radius: 0;
    + .ant-input-group-addon {
      border: none;
      border-bottom: 1px solid #d9d9d9;
      border-radius: 0;
      background-color: transparent;
    }
  }
  .vy-cmp-survey-container {
    .vy-cmp-survey-form {
      // 调研内容填写展示区域
      .vy-cmp-survey-item {
        border: 1px dashed #e8e7e7;
        margin-bottom: 10px;
      }
      // 调研类型区域添加
      .vy-plus-panel {
        position: relative;
        &::before {
          content: " ";
          position: absolute;
          top: 50%;
          left: 10px;
          right: 10px;
          height: 1px;
          border-top: 1px solid #494949;
        }
        .vy-plus-btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: #ffffff;
          padding: 0 20px;
          z-index: 10;
          cursor: pointer; // 若是可点击显示隐藏添加调研类型选项，可设置该值
          .anticon-plus {
            padding: 5px;
            background: #494949;
            border-radius: 50%;
            color: #ffffff;
          }
        }
      }
      .vy-plus-wrapper {
        position: relative;
        width: fit-content;
        margin: 0 auto;
        // border: 1px solid red;
        .vy-plus-options {
          margin: 0 auto;
          padding-top: 32px;
          position: relative;
          &::before {
            position: absolute;
            content: " ";
            border: 10px solid #494949;
            border-color: #fff #fff #494949 #fff;
            top: 12px;
            left: calc(50% - 10px);
          }
          .vy-plus-options-panel {
            border: 1px solid #000000;
            display: flex;
            border-radius: 8px;
            color: #ffffff;
            background: #494949;
            justify-content: space-between;
            .vy-plus-options-item {
              line-height: initial;
              position: relative;
              text-align: center;
              cursor: pointer;
              padding: 8px;
              box-shadow: 0px 0px 10px 2px rgba(87, 87, 87, 0.14);
              .vy-plus-options-item-desc {
                padding-top: 6px;
                font-size: 14px;
                font-weight: 400;
              }
            }
          }
        }
      }
    }
  }
  .vy-form-footer {
    margin-top: 50px;
    text-align: center;
    margin-bottom: 0;
    .ant-btn {
      padding: 0 100px;
      &.ant-btn-primary {
        background: rgba(51, 102, 255, 1);
        &:hover {
          background: rgba(51, 102, 255, 0.8);
        }
        &[disabled] {
          background: #f5f5f5;
          &:hover {
            background: #f5f5f5;
          }
        }
      }
    }
  }
}
</style>
